<template>
    <div class="tools">
        <!--        搜索栏-->
        <popper class="tools-item">
            <el-autocomplete slot="content" ref="searchInput"
                             v-model="toSearch"
                             prefix-icon="el-icon-search"
                             size="mini"
                             class="tools-search"
                             :clearable="true"
                             :fetch-suggestions="getSearchHistory"
                             @select="doSearch"
                             placeholder="输入搜索关键字">
                <el-button slot="append" size="mini" @click="doSearch">搜索</el-button>
            </el-autocomplete>
            <i slot="reference" class="el-icon-search"></i>
        </popper>
        <el-divider direction="vertical"></el-divider>

        <!--        新建栏-->
        <popper class="tools-item" content="新建节点">
            <i slot="reference" class="el-icon-circle-plus-outline" @click="this.toolsMethods.addNode"></i>
        </popper>
        <el-divider direction="vertical"></el-divider>

        <!--        模式栏-->
        <popper v-for="mode in modeList"
                :key="mode.id" class="tools-item"
                :id="mode.id"
                :content="mode.content">
            <i slot="reference" :class="mode.icon"></i>
        </popper>
        <el-divider direction="vertical"></el-divider>

        <!--        功能栏-->
        <popper v-for="func in funcList"
                :key="func.id" class="tools-item"
                :id="func.id"
                :content="func.content">
            <i slot="reference" :class="func.icon"></i>
        </popper>
        <el-divider direction="vertical"></el-divider>

        <!--        工具栏-->
        <popper v-for="tool in toolList"
                :key="tool.id" class="tools-item"
                :id="tool.id"
                :content="tool.content">
            <i slot="reference" :class="tool.icon"></i>
        </popper>
        <el-divider direction="vertical"></el-divider>

        <!--        信息栏-->
        <popper v-for="info in infoList"
                :key="info.id" class="tools-item"
                :id="info.id"
                :content="info.content">
            <i slot="reference" :class="info.icon"></i>
        </popper>
    </div>
</template>

<script>
    import popper from "./popper";

    const modeList = [
        {
            id: "select",
            content: "选择模式",
            icon: "el-icon-thumb"
        },
        {
            id: "edit",
            content: "编辑模式",
            icon: "el-icon-edit"
        },
        {
            id: "cut",
            content: "剪裁模式",
            icon: "el-icon-scissors"
        },
        {
            id: "layout",
            content: "布局模式",
            icon: "el-icon-rank"
        },
    ];
    const funcList = [
        {
            id: "view",
            content: "查看/隐藏关系",
            icon: "el-icon-view"
        },
        {
            id: "mode",
            content: "模式切换",
            icon: "el-icon-connection"
        },
        {
            id: "pic",
            content: "导出图片",
            icon: "el-icon-picture-outline-round"
        },
        {
            id: "xml",
            content: "导出xml",
            icon: "el-icon-download"
        },
        {
            id: "upload",
            content: "导入图谱",
            icon: "el-icon-upload2"
        },
        {
            id: "import",
            content: "解析文本为图谱",
            icon: "el-icon-receiving"
        }
    ];
    const toolList = [
        {
            id: "zoom_in",
            content: "放大",
            icon: "el-icon-zoom-in"
        },
        {
            id: "zoom_out",
            content: "缩小",
            icon: "el-icon-zoom-out"
        },
        {
            id: "refresh",
            content: "复位",
            icon: "el-icon-refresh"
        },
    ];
    const infoList = [
        {
            id: "info",
            content: "图谱信息",
            icon: "el-icon-info"
        },
        {
            id: "help",
            content: "智能问答",
            icon: "el-icon-question"
        },
        {
            id: "share",
            content: "分享",
            icon: "el-icon-share"
        },
    ];
    export default {
        name: "tools",
        components: {
            popper
        },
        mounted() {
            for (let methodList of Object.values(this.toolsMethods)) {
                for (let key of Object.keys(methodList)) {
                    let tool = document.getElementById(key);
                    if (tool) {
                        tool.onclick = methodList[key];
                    }
                }
            }

        },
        data: function () {
            return {
                toSearch: "",
                searchHistory: [],
                modeList: modeList,
                funcList: funcList,
                toolList: toolList,
                infoList: infoList
            };
        },
        props: {
            toolsMethods: {
                type: Object,
                default: null
            }
        },
        methods: {
            getSearchHistory(queryString, cb) {
                let results = this.searchHistory;
                cb(results);

            },
            doSearch() {

                var index = this.searchHistory.findIndex((ele) => ele.value == this.toSearch);
                //如果有的话就删除重复
                if (index != -1) {
                    this.searchHistory.splice(index, 1);
                }
                //向数组第一位添加
                this.searchHistory.unshift({value: this.toSearch});
                //如果数组长度大于4 就删除最后一项
                if (this.searchHistory.length > 4) {
                    this.searchHistory.splice(5, 1);
                }
                // 本地存储历史记录数组
                localStorage.searchHistory = JSON.stringify(this.searchHistory);
                this.toolsMethods.searchNode(this.toSearch);
                this.$refs.searchInput.activated = false;
            }
        }
    };
</script>

<style scoped>
    .tools {
        display: flex;
        align-items: center;
        justify-content: center;

        min-width: 50%;
        height: 30px;
        box-shadow: 0 1px 1px 1px #eeeeee;
        box-sizing: border-box;
        margin: 2px auto 10px auto;
        padding: 2px 8px;
    }

    .tools-search {
        width: 240px;
    }

    .tools-item {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 1em;
        height: 1em;
        box-sizing: content-box;
        margin: 0 8px;

        padding: 3px 4px;
        border-radius: 2px;
        cursor: pointer;
    }

    .tools-item:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }


</style>